import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import MInfo from "../components/MInfo.vue";
import MMusic from "../components/MMusic.vue";
import MBlog from "../components/MBlog.vue";
import MMessage from "../components/MMessage.vue";
import BlogEditor from "../components/BlogEditor.vue"
import BlogDisplay from "../components/BlogDisplay.vue"


Vue.use(VueRouter);

const routes = [{
        path: "/",
        name: "Home",
        component: Home
    },
    {
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ "../views/About.vue")
    },
    {
        path: "/blogs",
        name: "Blogs",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ "../views/Blogs.vue")
    },
    {
        path: "/blogDisplay",
        name: "BlogDisplay",
        component: BlogDisplay,
        meta: {
            keepAlive: true
        }
    },
    {
        path: "/messages",
        name: "Messages",
        meta: {
            keepAlive: true
        },
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ "../views/Messages.vue")
    },
    {
        path: "/blogEdit",
        name: 'BlogEditor',
        component: BlogEditor
    },
    {
        path: "/management",
        name: "Management",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        children: [{
                path: '',
                name: 'infoManage',
                component: MInfo
            },
            {
                path: 'musicManage',
                name: 'musicManage',
                component: MMusic
            },
            {
                path: 'blogManage',
                name: 'blogManage',
                component: MBlog
            },
            {
                path: 'messageManage',
                name: 'messageManage',
                component: MMessage
            }
        ],
        component: () =>
            import ( /* webpackChunkName: "about" */ "../views/Management.vue")
    },
    {
        path: "/login",
        name: "Login",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ "../views/Login.vue")
    }
];

const router = new VueRouter({
    routes
});

export default router;